<template>
  <div class="wrap">
    <div class="labelBox">
      <el-form
        :inline="true"
        ref="params"
        :model="params"
        class="demo-form-inline"
      >
        <div>
          <el-form-item label="名称/负责人/电话" prop="searchKey">
            <el-input
              v-model="params.searchKey"
              placeholder="名称/负责人/电话"
            ></el-input>
          </el-form-item>

          <el-form-item label="区域" prop="cityVal">
            <selectCity type="2" :cityVal.sync="params.cityVal"></selectCity>
          </el-form-item>
          <el-form-item label="是否投入基建" prop="isinfrastructure">
            <el-radio-group v-model="params.isinfrastructure">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否投入设备" prop="ismachine">
            <el-radio-group v-model="params.ismachine">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="余额" prop="balanceSorting">
            <el-select v-model="params.balanceSorting" placeholder="请选择">
              <el-option
                v-for="item in sortList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="注册时间" prop="time">
            <el-date-picker
              v-model="params.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeTime"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="GetAdminLeageStore(1)"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm('params')">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="labelBox mt-10">
      <el-row class="line36">
        <el-col :span="4" class="">
          总用户数 <span class="color-red font-26">{{ total }}</span>
        </el-col>
        <!-- <el-col :span="4" class="">
          条件满足数 <span class="color-red font-26">{{ total }}</span>
        </el-col> -->
        <el-col :span="4" :offset="12">
          <el-button
            type="warning"
            @click="(editObj = {}), (dialogVisible = true)"
            >新增合伙人</el-button
          >
        </el-col>
        <!-- <el-col :span="4">
          <el-button type="warning" @click="detailDialog = true"
            >合伙人详情</el-button
          >
        </el-col> -->
      </el-row>
      <el-table
        class="mt-10"
        border
        :data="tableData"
        style="width: 100%"
        ref="multipleTable"
        tooltip-effect="dark"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="store_type" label="序号" width="50">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>

        <el-table-column prop="name" label="合伙人名称"> </el-table-column>
        <el-table-column prop="store_name" label="授权区域">
          <template slot-scope="scope"
            >{{ scope.row.province }}{{ scope.row.city }}</template
          >
        </el-table-column>
        <el-table-column label="授权时间">
          <template slot-scope="scope">
            {{ scope.row.authority_time | filterTime }}
          </template>
        </el-table-column>
        <el-table-column prop="principalname" label="负责人" />
        <el-table-column prop="principalmobile" label="负责人手机" />
        <el-table-column label="子账号">
          <template slot-scope="scope">
            <router-link
              :to="{
                path: '/selfWash/subAccountList',
                query: {
                  storeId: scope.row.storeid,
                  companyname: scope.row.name,
                },
              }"
            >
              点击详情>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column prop="station_num" label="关联站点数">
          <template slot-scope="scope">
            <router-link
              :to="{
                path: '/selfWash/carWashStation',
              }"
            >
              {{ scope.row.station_num }}
            </router-link>
          </template>
        </el-table-column>

        <el-table-column prop="glmachine_num" label="关联设备数">
          <template slot-scope="scope">
            <router-link
              :to="{
                path: '/selfWash/Equipment',
              }"
            >
              {{ scope.row.glmachine_num }}
            </router-link>
          </template>
        </el-table-column>

        <el-table-column prop="infrastructure_Cost" label="投入基建（万）">
          <template slot-scope="scope">
            <router-link
              :to="{
                path: '/selfWash/investmentReturns',
                query: {
                  activeName: 'second',
                },
              }"
            >
              {{ scope.row.infrastructure_Cost }}
            </router-link>
          </template>
        </el-table-column>

        <el-table-column prop="trmachine_num" label="投入设备数">
          <template slot-scope="scope">
            <router-link
              :to="{
                path: '/selfWash/investmentReturns',
              }"
            >
              {{ scope.row.trmachine_num }}
            </router-link>
          </template>
        </el-table-column>

        <el-table-column prop="store_balance" label=" 余额（元）" />
        <el-table-column prop="frozen_balance" label="冻结金额（元）" />
        <el-table-column prop="defrost_amount" label="待验收解冻金额（元）" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.status === 0 ? "正常" : "删除" }}
          </template>
        </el-table-column>
        <el-table-column prop="store_status" label="操作" width="150px">
          <template slot-scope="scope">
            <el-button
              type="success"
              size="mini"
              @click="GetAdminLeageStoreDetail(scope.row.storeid, true)"
              >编辑</el-button
            >

            <el-button
              size="mini"
              @click="GetAdminLeageStoreDetail(scope.row.storeid)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block mt-20">
        <el-row justify="center" type="flex">
          <!-- <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="pageIndex"
            :limit.sync="pageSize"
            @pagination="GetAdminLeageStore"
          /> -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          > 
          </el-pagination>
        </el-row>
      </div>
    </div>

    <el-dialog
      title="合伙人详情"
      :visible.sync="detailDialog"
      width="50%"
      :before-close="handleClose"
      center
      class="detailContent"
    >
      <el-row class="row">
        <el-col :span="3" :offset="2">合伙人名称：</el-col>
        <el-col :span="18" :offset="1">{{ detailData.name }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="3" :offset="2">开户行</el-col>
        <el-col :span="18" :offset="1">{{ detailData.bank_open }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="3" :offset="2">银行卡号：</el-col>
        <el-col :span="18" :offset="1">{{ detailData.bank_num }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="3" :offset="2">企业法人：</el-col>
        <el-col :span="18" :offset="1">{{ detailData.legalname }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="3" :offset="2">法人电话：</el-col>
        <el-col :span="18" :offset="1">{{ detailData.mobile }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="3" :offset="2">地址：</el-col>
        <el-col :span="18" :offset="1">{{ detailData.address }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="3" :offset="2">证件资质：</el-col>
        <el-col :span="18" :offset="1">
          <el-row>
            <el-col :span="6">
              <el-image
                style="width: 100px; height: 100px"
                :src="detailData.licenseImg"
                fit="cover"
                :preview-src-list="[detailData.licenseImg]"
              >
              </el-image>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-image
                style="width: 100px; height: 100px"
                :src="detailData.legalfaceimg"
                fit="cover"
                :preview-src-list="[detailData.legalfaceimg]"
              >
              </el-image>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-image
                style="width: 100px; height: 100px"
                :src="detailData.legalbackimg"
                fit="cover"
                :preview-src-list="[detailData.legalbackimg]"
              >
              </el-image>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="3" :offset="2">授权区域：</el-col>
        <el-col :span="18" :offset="1"
          >{{ detailData.province }}{{ detailData.city }}</el-col
        >
      </el-row>
      <el-row class="row">
        <el-col :span="3" :offset="2">负责人：</el-col>
        <el-col :span="18" :offset="1">{{ detailData.principalname }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="3" :offset="2">证件资质：</el-col>
        <el-col :span="18" :offset="1">
          <el-row>
            <el-col :span="6">
              <el-image
                style="width: 100px; height: 100px"
                :src="detailData.principalfaceimg"
                fit="cover"
                :preview-src-list="[detailData.principalfaceimg]"
              >
              </el-image>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-image
                style="width: 100px; height: 100px"
                :src="detailData.principalbackimg"
                fit="cover"
                :preview-src-list="[detailData.principalbackimg]"
              >
              </el-image>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="3" :offset="2">账号ID：</el-col>
        <el-col :span="18" :offset="1">{{ detailData.principalmobile }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="3" :offset="2">创建时间：</el-col>
        <el-col :span="18" :offset="1">{{
          detailData.addtime | filterTime
        }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="3" :offset="2">更新时间：</el-col>
        <el-col :span="18" :offset="1">{{
          detailData.updatetime | filterTime
        }}</el-col>
      </el-row>
    </el-dialog>
    <addPartner :status.sync="dialogVisible" :editObj="editObj"></addPartner>
  </div>
</template>

<script>
import selectCity from "@/components/selectCity.vue";
import addPartner from "@/components/partner/addPartner.vue";
export default {
  name: "partnerList",
  components: { addPartner, selectCity },
  data() {
    return {
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      storetype: "0",
      total: 0,
      params: {
        pageIndex: 1,
        pageSize: 10,
        base_Region_City_Id: null,
        base_Region_Province_Id: null,
        isinfrastructure: false,
        ismachine: false,
        balanceSorting: 1,
        registStartTime: "",
        registEndTime: "",
        searchKey: "",
        cityVal: [],
        time: [],
      },

      sortList: [
        {
          id: 1,
          name: "从高到低",
        },
        {
          id: 2,
          name: "从低到高",
        },
      ],
      dialogVisible: false,
      detailDialog: false,
      detailData: {}, //详情对象
      cityVal: [], //地区数组
      editObj: {}, //修改需要传的对象
    };
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.GetAdminLeageStore(1);
      }
    },
    "params.cityVal": {
      handler(newValue, oldValue) {
        if (newValue) {
          this.params.base_Region_Province_Id = newValue[0];
          this.params.base_Region_City_Id = newValue[1];
        }
      },
      deep: true,
    },
    "params.time": {
      handler(newValue, oldValue) {
        if (newValue) {
          this.params.registStartTime = newValue[0];
          this.params.registEndTime = newValue[1];
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.GetAdminLeageStore(1);
  },
  methods: {
    GetAdminLeageStore(type) {
      if (type === 1) {
        this.params.pageIndex = 1;
      }
      this.$api.washCarUser.GetAdminLeageStore(this.params).then((res) => {
        // console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    returnType(id, type) {
      let name = "";
      this[type].forEach((it) => {
        if (it.id == id) {
          name = it.name;
        }
      });
      return name;
    },

    // 分页查询
    handleSizeChange(e) {
      this.params.pageSize = e;
      this.GetAdminLeageStore();
    },
    handleCurrentChange(e) {
      this.params.pageIndex = e;
      this.GetAdminLeageStore();
    },
    // 获取详情
    GetAdminLeageStoreDetail(id, edit) {
      // console.log(id);

      this.$api.washCarUser
        .GetAdminLeageStoreDetail({ storeid: id })
        .then((res) => {
          // console.log(res);
          this.detailData = res.data;
          this.cityVal = [
            this.detailData.authority_provinceid,
            this.detailData.authority_cityid,
          ];

          if (edit) {
            this.dialogVisible = true;
            this.$nextTick(() => {
              this.detailData.licenseimg = this.detailData.licenseImg;
              this.detailData.legalmobile = this.detailData.mobile;
              this.detailData.id = this.detailData.storeid;
              this.detailData.password = "123456";
              this.editObj = this.detailData;
            });
          } else {
            this.editObj = {};
            this.detailDialog = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    changeTime(val) {},
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    resetForm(formName) {
      // console.log(111, formName);
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped lang='scss'>
.wrap {
  width: 100%;
  padding: 10px;
  background: #f5f5f5;
}
.labelBox {
  background: #fff;
  padding: 10px;
}
.block {
  text-align: right;
}
.detailContent {
  .row {
    padding: 10px;
  }
}
</style>
